<template>
  <a-modal
    title="编辑POI数据"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item
          label="门店名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入门店名称" v-decorator="['name', {rules: [{required: true, message: '请输入门店名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="地区名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入地区名称" v-decorator="['countryName', {rules: [{required: true, message: '请输入地区名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="门店地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入门店地址" v-decorator="['address', {rules: [{required: true, message: '请输入门店地址！'}]}]" />
        </a-form-item>
        <a-form-item
          label="省会"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入省会" v-decorator="['provName', {rules: [{required: true, message: '请输入省会！'}]}]" />
        </a-form-item>
        <a-form-item
          label="城市"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入城市" v-decorator="['cityName', {rules: [{required: true, message: '请输入城市！'}]}]" />
        </a-form-item>
        <a-form-item
          label="门店电话"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入门店电话" v-decorator="['telephone', {rules: [{required: true, message: '请输入门店电话！'}]}]" />
        </a-form-item>
        <a-form-item
          label="百度门店名id"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入百度门店名id" v-decorator="['uid', {rules: [{required: true, message: '请输入百度门店名id！'}]}]" />
        </a-form-item>
        <a-form-item
          label="标签(类型标识)"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入标签(类型标识)" v-decorator="['tag', {rules: [{required: true, message: '请输入标签(类型标识)！'}]}]" />
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入" v-decorator="['subTag', {rules: [{required: true, message: '请输入！'}]}]" />
        </a-form-item>
        <a-form-item
          label="所属分类，如’hotel’、’cater’"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入所属分类，如’hotel’、’cater’" v-decorator="['type', {rules: [{required: true, message: '请输入所属分类，如’hotel’、’cater’！'}]}]" />
        </a-form-item>
        <a-form-item
          label="总体评分"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
        </a-form-item>
        <a-form-item
          label="评论数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入评论数" v-decorator="['commentNum', {rules: [{required: true, message: '请输入评论数！'}]}]" />
        </a-form-item>
        <a-form-item
          label="纬度"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
        </a-form-item>
        <a-form-item
          label="经度"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
        </a-form-item>
        <a-form-item
          label="街景图id"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入街景图id" v-decorator="['streetId', {rules: [{required: true, message: '请输入街景图id！'}]}]" />
        </a-form-item>
        <a-form-item
          label="是否有详情：1有，0没有"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入是否有详情：1有，0没有" v-decorator="['detail', {rules: [{required: true, message: '请输入是否有详情：1有，0没有！'}]}]" />
        </a-form-item>
        <a-form-item
          label="poi的详情页"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入poi的详情页" v-decorator="['detailUrl', {rules: [{required: true, message: '请输入poi的详情页！'}]}]" />
        </a-form-item>
        <a-form-item
          label="poi商户的价格"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
        </a-form-item>
        <a-form-item
          label="团购数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入团购数" v-decorator="['grouponNum', {rules: [{required: true, message: '请输入团购数！'}]}]" />
        </a-form-item>
        <a-form-item
          label="页码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入页码" v-decorator="['page', {rules: [{required: true, message: '请输入页码！'}]}]" />
        </a-form-item>
        <a-form-item
          label="是否有效 0-无效  1-有效"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入是否有效 0-无效  1-有效" v-decorator="['isEnabled', {rules: [{required: true, message: '请输入是否有效 0-无效  1-有效！'}]}]" />
        </a-form-item>
        <a-form-item
          label="认领次数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入认领次数" v-decorator="['receiveNum', {rules: [{required: true, message: '请输入认领次数！'}]}]" />
        </a-form-item>
        <a-form-item
          label="网格"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入网格" v-decorator="['grid', {rules: [{required: true, message: '请输入网格！'}]}]" />
        </a-form-item>
        <a-form-item
          label="创建人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入创建人" v-decorator="['createUserId', {rules: [{required: true, message: '请输入创建人！'}]}]" />
        </a-form-item>
        <a-form-item
          label="创建时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-decorator="['createDate',{rules: [{ required: true, message: '请选择创建时间！' }]}]" @change="onChangecreateDate"/>
        </a-form-item>
        <a-form-item
          label="更新人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入更新人" v-decorator="['modifyUserId', {rules: [{required: true, message: '请输入更新人！'}]}]" />
        </a-form-item>
        <a-form-item
          label="更新时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-date-picker style="width: 100%" placeholder="请选择更新时间" v-decorator="['modifyDate',{rules: [{ required: true, message: '请选择更新时间！' }]}]" @change="onChangemodifyDate"/>
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入" v-decorator="['downLocation', {rules: [{required: true, message: '请输入！'}]}]" />
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入" v-decorator="['upLocation', {rules: [{required: true, message: '请输入！'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { poiDataEdit } from '@/api/modular/main/poidata/poiDataManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        createDateDateString: '',
        modifyDateDateString: '',
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              name: record.name,
              countryName: record.countryName,
              address: record.address,
              provName: record.provName,
              cityName: record.cityName,
              telephone: record.telephone,
              uid: record.uid,
              tag: record.tag,
              subTag: record.subTag,
              type: record.type,
              overallRating: record.overallRating,
              commentNum: record.commentNum,
              lat: record.lat,
              lng: record.lng,
              streetId: record.streetId,
              detail: record.detail,
              detailUrl: record.detailUrl,
              price: record.price,
              grouponNum: record.grouponNum,
              page: record.page,
              isEnabled: record.isEnabled,
              receiveNum: record.receiveNum,
              grid: record.grid,
              createUserId: record.createUserId,
              modifyUserId: record.modifyUserId,
              downLocation: record.downLocation,
              upLocation: record.upLocation
            }
          )
        }, 100)
        // 时间单独处理
        if (record.createDate != null) {
            this.form.getFieldDecorator('createDate', { initialValue: moment(record.createDate, 'YYYY-MM-DD') })
        }
        this.createDateDateString = moment(record.createDate).format('YYYY-MM-DD')
        // 时间单独处理
        if (record.modifyDate != null) {
            this.form.getFieldDecorator('modifyDate', { initialValue: moment(record.modifyDate, 'YYYY-MM-DD') })
        }
        this.modifyDateDateString = moment(record.modifyDate).format('YYYY-MM-DD')
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.createDate = this.createDateDateString
            values.modifyDate = this.modifyDateDateString
            poiDataEdit(values).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('编辑失败')//  + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      onChangecreateDate(date, dateString) {
        this.createDateDateString = dateString
      },
      onChangemodifyDate(date, dateString) {
        this.modifyDateDateString = dateString
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
